<!-- 供应商管理 -->
<template>
  <div class="app-container">
    <el-dialog
      title="供应商信息"
      :before-close="handleClose"
      :visible.sync="dialogAdd"
      ref="drawer"
      size="35%"
    >
      <div class="demo-form">
        <el-form :model="form" :rules="rules" ref="ruleForm" size="medium">
          <el-form-item
            label="供应商编码"
            :label-width="formLabelWidth"
            prop="supplierCode"
          >
            <el-input
              v-model="form.aa"
              maxlength="supplierCode"
              disabled
              placeholder="供应商编码，系统自动生成"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="供应商名称"
            :label-width="formLabelWidth"
            prop="supplierName"
          >
            <el-input
              v-model="form.supplierName"
              maxlength="50"
              placeholder="请输入供应商名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="联系人"
            :label-width="formLabelWidth"
            prop="contacts"
          >
            <el-input
              v-model="form.contacts"
              maxlength="50"
              placeholder="请输入联系人"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="联系电话"
            :label-width="formLabelWidth"
            prop="phone"
          >
            <el-input
              v-model="form.phone"
              maxlength="11"
              placeholder="请输入联系电话"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="地址"
            :label-width="formLabelWidth"
            prop="address"
          >
            <el-input
              v-model="form.address"
              maxlength="50"
              placeholder="请输入地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth" prop="notes">
            <el-input
              v-model="form.notes"
              maxlength="200"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="状态"
            :label-width="formLabelWidth"
            prop="status"
          >
            <button
              v-bind:class="[{ 'button-color': status }, 'button-enable']"
              @click="statusButton('1')"
              type="button"
            >
              启用
            </button>
            <button
              v-bind:class="[{ 'button-color': !status }, 'button-disable']"
              @click="statusButton('0')"
              type="button"
            >
              停用
            </button>
          </el-form-item>
        </el-form>
      </div>
      <div class="button-div">
        <button
          class="button-enable button-padding"
          type="button"
          @click="resetForm"
           size="medium"
        >
          取消
        </button>
        <button
          class="button-disable button-color button-margin"
          type="button"
          @click="submitForm"
           size="medium"
        >
          保存
        </button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { supplierAdd, supplierUpdate } from "@/api/nonOil/class";
export default {
  name: "SupplierManagementAdd",
  props: {
    dialogAdd: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: {
        supplierCode: null,
        supplierName: null,
        contacts: null,
        phone: null,
        address: null,
        notes: null,
        status: "1",
      },
      formLabelWidth: "100px",
      timer: null,
      rules: {
        supplierName: [
          { required: true, message: "请输入供应商名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 启用/停用
    statusButton(status) {
      this.form.status = status;
    },

    // 取消
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.$emit("update:dialogAdd", false);
    },

    // 保存
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.form.supplierId) {
            supplierUpdate(this.form).then((res) => {
              this.$message({
                type: "success",
                message: "编辑供应商成功！",
              });
              this.$refs.ruleForm.resetFields();
              this.$emit("update:dialogAdd", false);
            });
          } else {
            supplierAdd(this.form).then((res) => {
              this.$message({
                type: "success",
                message: "新增供应商成功！",
              });
              this.$refs.ruleForm.resetFields();
              this.$emit("update:dialogAdd", false);
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    handleClose() {
      this.resetForm();
    },
  },

  computed: {
    status() {
      if (this.form.status == "1") return true;
      else return false;
    },
  },

  watch: {
    dialogAdd: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        if (newVal) {
          // 开
          this.form = this.formData;
        } else {
          // 关
          this.form.status = "1";
        }
      },
    },
  },
};
</script>
<style scoped lang="scss">
.button-padding {
  position: absolute;
  left: 35%;
  bottom: 30px;
  width: 80px !important;
  height: 40px !important;
  border-radius: 20px;
}
.button-margin {
  position: absolute;
  left: 55%;
  bottom: 30px;
  width: 80px !important;
  height: 40px !important;
  border-radius: 20px;
}
.button-div {
  width: 100%;
  text-align: center;
  margin-top: 90px;
}
.button-color {
  background-color: #409eff !important;
  color: #fff !important;
}
.button-enable {
  color: #797979;
  width: 70px;
  line-height: 28px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
}
.button-disable {
  color: #797979;
  width: 70px;
  line-height: 28px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
}

.demo-form {
  position: relative;
  margin: 0px 6% 0px 1%;
}
</style>
